import React from 'react';
import { Pie } from '@ant-design/charts';

const DemoPie: React.FC = (props: any) => {
    const { data } = props;
    var config = {
        style: {
            width: 400,
            height: 400,
        },
        appendPadding: 5,
        data: data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            { type: 'element-selected' },
            { type: 'element-active' },
        ],
        statistic: {
            title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '',
            },
        },
    };
    return <Pie {...config} />;
};

export default DemoPie;
